<template>
	<view class="container">
		<view class="header">
			<view class="header-header">
				<image :src="activity.actImg" class="image-wrapper"></image>
				<text class="act-title">{{activity.actName}}</text>
				<view class="act-taglist">
					<span class="act-tag" 
						v-for="tag of activity.actTag">
						{{tag}}
					</span>
				</view>
			</view>
			<view class="header-bottom">
				<p class="star">
					<image src="/static/component/star/stars.png" v-for="s in scoreToInt(activity.actScore)" :key="s" mode=""></image>
					<block v-if="scoreToInt(activity.actScore) !== 5">
						<image src="/static/component/star/star-no.png" v-for="(s,h) in (5-scoreToInt(activity.actScore))" :key="h" mode=""></image>
					</block>
				</p>
				<text class="score-text">{{scorePoint2(activity.actScore)}}</text>
				<view class="time">
					<text class="time-start">{{renderTime(activity.startTime)}}</text>
					<text class="time-split">-</text>
					<text class="time-end">{{renderTime(activity.endTime)}}</text>
				</view>
			</view>
		</view>
		<view class="info">
			<view class="museum">
				<view class="museum-left">
					<view class="museum-header-top">
						<text class="museum-city">{{activity.actCity}}</text>
						<text class="museum-split">|</text>
						<text class="museum-name">{{activity.museum.museName}}</text>
					</view>
					<view class="museum-header-bottom">{{activity.museum.museAddr}}</view>
				</view>
				<view class="museum-right">
					<image class="museum-point-pic" src="../../static/activity/img/point.png" @tap="openMap"></image>
				</view>
			</view>
			<view class="notice" @tap="openNtc">
				<image class="notice-icon" src="../../static/activity/img/message.png"></text>
				<view class="notice-text">最新通知</view>
				<view class="yticon icon-you"></view>
			</view>
			<view class="live" v-if="activity.actEx === 1">
				<image class="live-icon" src="../../static/activity/img/live.png"></text>
				<view class="live-text">线上展厅</view>
				<view class="yticon icon-you"></view>
			</view>
			<view class="latestjoin">
				<view class="latestjoin-text">最近参与</view>
				<view class="latestjoin-avatar" 
					v-for="(item, index) in activity.latestJoin"
					:key="index">
					<image class="latestjoin-avatar-simple"
						:src="item.avatar">
				</view>
			</view>
		</view>
		<block class="uni-tab" v-for="(tab,index) in tabBars" :key="tab.id">
			<view class="uni-tab-item" :class="{'uni-tab-item-title-active' :tabIndex==index}" @tap="jumpTo(index)">
				<text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
			</view>
		</block>
		<scroll-view 
					class="scrolly" 
					scroll-y="true"
					scroll-with-animation="true"
					:scroll-into-view="toViewId"
					style="height: 1300upx;">
			<view class="description" id="view1">
				<p class="des-title">
					活动详情
				</p>
				<view class="content">
					<view class="content-text">
						{{activity.actCont}}
					</view>
					<view class="content-img" v-for="(img,x) of activity.actContImg" :key="x" @click="preview(activity.actContImg, x)">
						<image class="content-img-simple" :src="img"></image>
					</view>
				</view>
			</view>
			<!-- 评价 -->
			<view class="evaluate" id="view2">
				<p class="eva_title">
					精选评价
					<text class="seeAll" @tap="openCmtAll">查看全部</text>
				</p>
				<view class="evaluate_box">
					<view class="pingjia">
						<view v-if="activitySelectedCmt.length !== 0">
							<view class="pingjia_box" v-for="(row, index) in activitySelectedCmt" :key="index">
								<view class="box_top">
									<image :src="row.user.avatar" mode="" class="head"></image>
									<view class="right">
										<p class="name">{{ row.user.username }}</p>
										<p class="p2">
											<text class="text1">{{ renderTimeYMDHMS(row.cmtTime)}}</text>
										</p>
										<p class="p3">
											<image src="/static/component/star/stars.png" v-for="s in scoreToInt(row.cmtScore)" :key="s" mode=""></image>
											<block v-if="scoreToInt(row.cmtScore) !== 5">
												<image src="/static/component/star/star-no.png" v-for="(s,h) in (5-scoreToInt(row.cmtScore))" :key="h" mode=""></image>
											</block>
										</p>
									</view>
								</view>
								
								<view class="ping_neirong">{{ row.cmtCont }}</view>
								<view class="ping_img" v-if="row.cmtImg !== null">
									<image :src="s" mode="" v-for="(s,x) in row.cmtImg" :key="x" @click="preview(row.cmtImg, x)"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<view class="p-b-btn" @tap="openCmtPost">
				<text class="yticon icon-xiatubiao--copy"></text>
				<text>评论</text>
			</view>
			<view class="p-b-btn" :class="{active: favorite}" @click="clickcollect">
				<text class="yticon icon-shoucang"></text>
				<text>收藏</text>
			</view>
			
			<view class="action-btn-group">
				<button type="primary" class=" action-btn no-border enroll-now-btn" @tap="clickEnrollBtn">{{enrollBtnText}}</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		onLoad: function (option) {
			// var naviData = JSON.parse(option.naviData);
			// this.judgeUserCollectAct("aiqiu", naviData.actId)
			// this.judgeUserEnrollAct("aiqiu", naviData.actId)
			// this.getActivityDetail(naviData.actId);
			// this.getActiviySelectedCmt(naviData.actId);
			this.judgeUserCollectAct("aiqiu", 1)
			this.judgeUserEnrollAct("aiqiu", 1)
			this.getActivityDetail(1);
			this.getActiviySelectedCmt(1);
			//this.getLocation(); //获取位置信息
		},
		data() {
			return {
				//报名活动按钮文字显示
				enrollBtnText: '',
				userId: "aiqiu",
				//用户报名状态
				enroll: false,
				//用户收藏状态
				favorite: false,
				activity: {},
				activitySelectedCmt: [],
				tabIndex: 0,
				tabBars: [
				    {
						name: "详情",
						id: "view1",
					},
				    {
						name: "评价",
						id: "view2",
					},
				    {
						name: "相似推荐",
						id: "view3",
					},
				],
				toViewId: '',
				// latitude: '',
				// longitude: '',
			}
		},
		methods: {
			//评分获取两位小数
			scorePoint2(actScore) {
				return actScore.toFixed(2);
			},
			//判断该用户是否收藏活动
			judgeUserCollectAct(userId, actId) {
				uni.request({
					url: "http://ronin.fun:8888/act/collect/judge",
					method: 'POST',
					data: {
						userId: userId,
						actId: actId,
					},
					header: {
						'content-type': "application/x-www-form-urlencoded"
					},
					success: (res) => {
						if (res.data.code === 200) {
							this.favorite = res.data.data
						}
					}
				})
			},
			//点击收藏按钮
			clickcollect(){
				this.collectAct(this.userId, this.activity.actId)
			},
			//收藏活动（取消收藏活动）
			//*********有问题
			collectAct(userId, actId) {
				uni.request({
					url: "http://ronin.fun:8888/act/collect",
					method: 'POST',
					data: {
						userId: userId,
						actId: actId,
						//参数 有问题
						actClassifyId: 1,
					},
					header: {
						'content-type': "application/x-www-form-urlencoded"
					},
					success: (res) => {
						console.log(res)
						if (res.data.code === 200) {
							this.favorite = res.data.data
							if (this.favorite === true) {
								uni.showToast({
									title: "收藏成功",
									icon: 'none',
									duration: 2000,
								});
							} else {
								uni.showToast({
									title: "取消收藏成功",
									icon: 'none',
									duration: 2000,
								});
							}
						}
					}
				})
			},
			
			//判断该用户是否报名活动
			judgeUserEnrollAct(userId, actId) {
				uni.request({
					url: "http://ronin.fun:8888/act/enroll/judge",
					method: 'POST',
					data: {
						userId: userId,
						actId: actId,
					},
					header: {
						'content-type': "application/x-www-form-urlencoded"
					},
					success: (res) => {
						if (res.data.code === 200) {
							//获取用户是否报名活动结果
							this.enroll = res.data.data
							//对应文字显示
							if (this.enroll === true) {
								this.enrollBtnText = "取消报名"
							} else {
								this.enrollBtnText = "立即报名"
							}
						}
					}
				})
			},
			//点击报名按钮
			clickEnrollBtn() {
				if (this.enroll === false) {
					//未报名 进行报名
					uni.showModal({
						    title: '提示',
						    content: '需要报名活动吗？',
						    success: function (res) {
						        if (res.confirm) {
									this.enrollAct(this.userId, this.activity.actId);
									setTimeout(() => {
										this.judgeUserEnrollAct(this.userId, this.activity.actId);
										uni.showToast({
											title: "报名成功",
											icon: 'none',
											duration: 2000,
										});
									}, 1000)
									//报名活动
						        } else if (res.cancel) {
									//取消
						            console.log('用户点击取消');
						        }
						    }.bind(this)
					});
				} else if (this.enroll === true) {
					//已经报名 取消报名
					uni.showModal({
						    title: '提示',
						    content: '需要取消报名活动吗？',
						    success: function (res) {
						        if (res.confirm) {
									this.enrollAct(this.userId, this.activity.actId);
									setTimeout(() => {
										this.judgeUserEnrollAct(this.userId, this.activity.actId);
										uni.showToast({
											title: "取消报名活动成功",
											icon: 'none',
											duration: 2000,
										});
									}, 1000)
									//取消报名活动
						        } else if (res.cancel) {
									//取消
						            console.log('用户点击取消');
						        }
						    }.bind(this)
					});
				}
			},
			//调用接口 报名活动/取消报名活动
			enrollAct(userId, actId) {
				uni.request({
					url: "http://ronin.fun:8888/act/enroll",
					method: 'POST',
					data: {
						userId: userId,
						actId: actId,
					},
					header: {
						'content-type': "application/x-www-form-urlencoded"
					},
					success: (res) => {
						if (res.data.code === 200) {
							this.enroll = res.data.data
						}
					}
				})
			},
			//发表活动评论
			openCmtPost(e) {
				let obj = {
					actId: this.activity.actId,
					actName: this.activity.actName,
					actImg: this.activity.actImg,
				}
				var naviData = JSON.stringify(obj);
				uni.navigateTo({
					url: '/pages/activities/actcmtpost/actcmtpost'
						+ '?'
						+ 'naviData=' + naviData,
				})
			},
			//查看全部评价
			openCmtAll(e) {
				let obj = {
					actId: this.activity.actId,
				}
				var naviData = JSON.stringify(obj);
				uni.navigateTo({
					url: '/pages/activities/activitycmt'
						+ '?'
						+ 'naviData=' + naviData,
				})
			},
			//最新通知页面跳转
			openNtc(e) {
				let obj = {
					actId: this.activity.actId,
				}
				var naviData = JSON.stringify(obj);
				uni.navigateTo({
					url: '/pages/activities/notice'
						+ '?'
						+ 'naviData=' + naviData,
				})
			},
			//修改时间格式：年月日
			renderTime(date) {
			  var dateee = new Date(date).toJSON();
			  return new Date(+new Date(dateee) + 8 * 3600 * 1000)
						.toISOString()
						.replace(/T/g, ' ')
						.replace(/\.[\d]{3}Z/, '') 
						.replace(/-/g, ".")
						.substring(0, 10)
			},
			//修改时间格式：年月日时分秒
			renderTimeYMDHMS(date) {
			  var dateee = new Date(date).toJSON();
			  return new Date(+new Date(dateee) + 8 * 3600 * 1000)
						.toISOString()
						.replace(/T/g, ' ')
						.replace(/\.[\d]{3}Z/, '') 
			},
			//获取活动详情信息
			//http://ronin.fun:8888/act/detail?actId={}
			getActivityDetail(actId) {
				uni.request({
				    url: 'http://ronin.fun:8888/act/detail',
					data: {
						actId: actId
					},
				    success: (res) => {
						this.activity = res.data.data;
						console.log(res.data);
				    }
				});
			},
			//获取活动精选评论
			//http://ronin.fun:8888/act/cmt/selected?actId={}
			getActiviySelectedCmt(actId) {
				uni.request({
				    url: 'http://ronin.fun:8888/act/cmt/selected',
					data: {
						actId: actId,
					},
				    success: (res) => {
						this.activitySelectedCmt = res.data.data;
						console.log(res.data);
				    }
				});
			},
			//评分取整
			scoreToInt(actScore) {
				return Math.round(actScore);
			},
			//点击三栏跳转到对应部分
			jumpTo(index) {
				this.tabIndex=index;
			    this.toViewId = this.tabBars[index].id;
				console.log(this.toViewId);
			},
			openMap() {
				//打开地图
				let that = this;
				uni.openLocation({
					latitude: this.activity.museum.latitude,
					longitude: this.activity.museum.longitude,
					success: e => {
			
					}
				});
			},
			preview(imgs, index){ //预览图片
				uni.previewImage({
					current:index,
					urls:imgs
				})
			},
			// getLocation() {
			// 	let that = this;
			// 	uni.getLocation({
			// 		type: 'wgs84',
			// 		geocode: true,
			// 		success: res => {
			// 			console.log('获取经纬度成功', res);
			// 			that.setData({
			// 				latitude: res.latitude,
			// 				longitude: res.longitude
			// 			});
			// 		},
			// 		fail: () => {
			// 			console.log('获取经纬度失败');
			// 			that.setData({
			// 				latitude: '',
			// 				longitude: ''
			// 			});
			// 		},
			// 		complete: () => { // 解析地址
			// 		}
			// 	});
			// },
		}
	}
</script>

<style lang="scss">
	page{
		background: #ffffff;
		padding-bottom: 160upx;
	}
	.icon-you{
		font-size: 30upx;
		color: #888;
	}
	.header{
		height: 420upx;
		background-color: #b1e3ff;
		border-bottom: 1upx solid #f2f2f2;
		.header-header {
			height: 50%;
			.image-wrapper {
				margin-top: 40upx;
				width: 220upx;
				height: 300upx;
				border-radius: 10px;
				margin-left: 25px;
			}
			.act-title {
				position: absolute;
				color: #ffffff;
				margin-top: 40upx;
				margin-left: 40upx;
				margin-right: 40upx;
				font-size: 35upx;
				font-weight: 900;
				font-family: "Times New Roman";
			}
			.act-taglist {
				position: absolute;
				top: 150upx;
				margin-left: 300upx;
				.act-tag {
					height: 23px;
					border: 1px solid #FFFFFF;
					border-radius: 15px;
					border-spacing: 0;
					font-size: 10px;
					padding: 1px 8px;
					white-space: nowrap;
					vertical-align: baseline;
					letter-spacing: 1px;
					color: #FFFFFF;
				}
			}
		}
		.header-bottom {
			border-top-left-radius:13px;
			border-top-right-radius:13px;
			border-bottom-right-radius:0px;
			border-bottom-left-radius:0px;
			height: 50%;
			background-color: #ffffff;
			.star {
				height: 35upx;
				position: absolute;
				width: 250upx;
				top: 240upx;
				left: 305upx;
				image {
					width: 38upx;
					height: 38upx;
					float: left;
					margin-left: 5upx;
				}
			}
			.score-text {
				position: absolute;
				width: 250upx;
				top: 240upx;
				left: 530upx;
				color: #555555;
			}
			.time {
				position: absolute;
				width: 500upx;
				top: 370upx;
				left: 60upx;
				color: #333333;
				font-size: 30upx;
				.time-split {
					margin-left: 10upx;
					margin-right: 10upx;
				}
			}
		}
	}
	.info{
		width: 100%;
		background-color: #ffffff;
		.museum {
			height: 150upx;
			border-bottom: 1upx solid #f2f2f2;
			.museum-left {
				float: left;
				margin-left: 60upx;
				font-size: 34upx;
				margin-top: 25upx;
				color: #555555;
				.museum-header-top {
					.museum-split {
						margin-left: 15upx;
						margin-right: 15upx;
					}
				}
				.museum-header-bottom {
					margin-top: 10upx;
					margin-left: 3upx;
					color: #AAAAAA;
					font-size: 30upx;
				}
			}
			.museum-right {
				margin-top: 30upx;
				margin-right: 50upx;
				float: right;
				.museum-point-pic {
					width: 70upx;
					height: 70upx;
				}
			}
		}
		.notice {
			height: 110upx;
			display:flex;
			align-items:center;
			position:relative;
			border-bottom: 1upx solid #f2f2f2;
			.notice-icon {
				width: 75upx;
				height: 75upx;
				margin-left: 60upx;
			}
			.notice-text{
				flex: 1;
				margin-left: 20upx;
				font-size: 30upx;
				color: #555555;
			}
			.icon-you{
				flex: 0.15;
			}
		}
		.live {
			height:110upx;
			display:flex;
			align-items:center;
			position:relative;
			border-bottom: 1upx solid #f2f2f2;
			.live-icon {
				width: 70upx;
				height: 65upx;
				margin-left: 65upx;
			}
			.live-text{
				flex: 1;
				margin-left: 20upx;
				font-size: 30upx;
				color: #555555;
			}
			.icon-you{
				flex: 0.15;
			}
		}
		.latestjoin {
			height: 160upx;
			display:flex;
			align-items:center;
			position:relative;
			border-bottom: 1upx solid #f2f2f2;
			.latestjoin-text {
				width: 150upx;
				height: 65upx;
				margin-left: 55upx;
				color: #555555;
				font-size: 30upx;
			}
			.latestjoin-avatar {
				flex: 1;
				margin-left: 8upx;
				.latestjoin-avatar-simple {
					border-radius: 100upx;
					width: 80upx;
					height: 80upx;
				}
			}
		}
	}
	.description {
		border-top: 1upx solid #f2f2f2;
		.des-title {
			height: 70upx;
			margin-left: 50upx;
			margin-top: 10upx;
			line-height: 70upx;
			font-size: 35upx;
			font-weight: bold;
			color: #202020;
			text{
				font-weight: normal;
			}
		}
		.content {
			width: 100%;
			margin-bottom: 55upx;
			.content-text {
				margin-left: 40upx;
				margin-right: 40upx;
				font-size: 35upx;
				color: #555555;
				text-indent: 20px;
				line-height: 180%;
			}
			.content-img {
				text-align: center;
				.content-img-simple {
					margin-top: 20upx;
					border-radius: 30upx;
					width: 600upx;
					height: 400upx;
				}
			}
		}
	}
	.evaluate{
		padding: 0 4%;
		border-top: 10upx solid #ddd;
		.eva_title{
			height: 70upx;
			margin-top: 10upx;
			line-height: 70upx;
			font-size: 30upx;
			font-weight: bold;
			color: #202020;
			text{
				font-weight: normal;
			}
			.seeAll{
				float: right;
				font-size: 24upx;
				color: #999999;
				transform: translateY(6upx);
				&:active{
					opacity: 0.8;
				}
			}
		}
		.evaluate_box{
			.pingjia {
				background-color: #ffffff;
				overflow: hidden;
				.pingjia_box {
					overflow: hidden;
					margin-top: 20upx;
					padding-bottom: 20upx;
					overflow: hidden;
					border-bottom: 1upx solid #f2f2f2;
					&:last-child {
						border-bottom: none;
						padding-bottom: 10upx;
					}
					.box_top {
						display: flex;
						.head {
							height: 80upx;
							max-width: 80upx;
							min-width: 80upx;
							flex: 1;
							border-radius: 50%;
							float: left;
						}
						.right {
							flex: 1;
							margin-left: 20upx;
							position: relative;
							.name {
								font-size: 26upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: rgba(0, 0, 0, 1);
							}
							.p2 {
								margin-top: 20upx;
								font-size: 24upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: rgba(156, 156, 156, 1);
								.text2 {
									margin-left: 50upx;
								}
							}
							.p3 {
								height: 35upx;
								position: absolute;
								right: 0;
								width: 200upx;
								top: 8upx;
								image {
									width: 35upx;
									height: 35upx;
									float: left;
									margin-left: 5upx;
								}
							}
						}
					}
					.ping_neirong {
						font-size: 28upx;
						margin-top: 20upx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: rgba(0, 0, 0, 1);
						line-height: 50upx;
					}
					.ping_img {
						display: flex;
						flex-wrap: wrap;
						align-items: flex-start;
						align-content: flex-start;
						justify-content: space-between;
						margin-top: 20upx;
						&::after {
							content: '';
							max-width: 29vw;
							min-width: 29vw;
						}
						image {
							max-width: 29vw;
							min-width: 29vw;
							height: 29vw;
							border-radius: 10upx;
							margin-bottom: 20upx;
						}
					}
				}
			}
		}
	}
	.tabs {
	    flex: 1;
	    flex-direction: column;
	    overflow: hidden;
	    background-color: #ffffff;
	    /* #ifdef MP-ALIPAY || MP-BAIDU */
	    height: 100vh;
	    /* #endif */
	}
	
	.scroll-h {
	    width: 750upx;
	    height: 80upx;
	    flex-direction: row;
	    /* #ifndef APP-PLUS */
	    white-space: nowrap;
	    /* #endif */
	    /* flex-wrap: nowrap; */
	    /* border-color: #cccccc;
	    border-bottom-style: solid;
	    border-bottom-width: 1px; */
	}
	
	.line-h {
	    height: 1upx;
	    background-color: #cccccc;
	}
	
	.uni-tab-item {
	    /* #ifndef APP-PLUS */
	    display: inline-block;
	    /* #endif */
	    flex-wrap: nowrap;
	    padding-left: 110upx;
	    padding-right: 34upx;
	}
	
	.uni-tab-item-title {
	    color: #555;
	    font-size: 35upx;
	    height: 80upx;
	    line-height: 80upx;
	    flex-wrap: nowrap;
	    /* #ifndef APP-PLUS */
	    white-space: nowrap;
	    /* #endif */
	}
	
	.uni-tab-item-title-active {
	    color: #555555;
		font-weight: bold;
	}
	/* 底部操作菜单 */
	.page-bottom{
		position:fixed;
		left: 30upx;
		bottom:30upx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690upx;
		height: 115upx;
		background: rgba(255,255,255,.9);
		box-shadow: 0 0 20upx 0 rgba(0,0,0,.5);
		border-radius: 16upx;
		
		.p-b-btn{
			display:flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 30upx;
			color: #606266;
			width: 110upx;
			height: 80upx;
			.yticon{
				font-size: 40upx;
				line-height: 48upx;
				color: #909399;
			}
			&.active, &.active .yticon{
				color: #fa436a;
			}
			.icon-xiatubiao--copy{
				font-size: 45upx;
			}
			.icon-shoucang{
				font-size: 53upx;
			}
		}
		.action-btn-group{
			display: flex;
			height: 76upx;
			border-radius: 100px;
			overflow: hidden;
			//box-shadow: 0 20upx 40upx -16upx #fa436a;
			//box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			//background: linear-gradient(to right, #ffac30,#fa436a,#F56C6C);
			background: #b1e3ff;
			margin-left: 20upx;
			position:relative;
			/*&:after{
				content: '';
				position:absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28upx;
				width: 0;
				border-right: 1px solid rgba(255,255,255,.5);
			}*/
			.action-btn{
				display:flex;
				align-items: center;
				justify-content: center;
				width: 380upx;
				height: 100%;
				font-size: 32upx;
				padding: 0;
				border-radius: 0;
				background: transparent;
			}
		}
	}
</style>
